<template>
	<view class="frame">
		<view class="seaRch">
			<input class="seaRch-input" v-model="residentialName" type="text" focus="true" @input="searchInput" placeholder="请输入小区名称" />
		</view>
		
		<view class="searchdata">
			<block v-for="(item,index) in allHouse" :key="index" >
				<view class="searchdata-v" @click="selectHouse(item)">
					<text>{{item}}</text>
					<image src="../../../static/inster/dayu.png" mode="widthFix" class="img">
				</view>
			</block>
		</view>
	</view>
</template>

<script>
var { log } = console;
// 引入SDK核心类
var QQMapWX = require('../../../common/qqmap-wx-jssdk.js');
var qqmapsdk = new QQMapWX({
		key: 'FGEBZ-YPFW6-4HTSO-MEYP5-4MEOQ-CLFDL'
		});
// 引入vuex的mapstate
import { mapState } from 'vuex';
export default {
	data() {
		return {
			region:'',
			category:'category=住宅小区',
			allHouse:[]
		};
	},
	methods:{
			// 实时搜索城市
					searchInput(e){
						this.allHouse =[]
						// console.log(e.detail.value)
						qqmapsdk.getSuggestion({
							keyword:e.detail.value,
							region:this.region,
							region_fix:1,
							policy:1,
							filter:this.category,
							success:(res)=>{
								console.log(res)
								let city = res.data
								this.allHouse = city.map((item)=>{
									return item.title
								})
								// 数组合并
								console.log(this.allHouse)
							},
							fail:(err)=>{
								console.log(err)
							}
						})
					},
				
				// 选择小区
				selectHouse(item){
					log("选中的小区:" + item)
					// vuex存入数据仓库中
					this.$store.commit('housemuta',item)
					uni.navigateBack({
					    delta: 1
					});
				}	
	},
	onLoad(e) {
		let objdata = JSON.parse(e.obj);
		this.region = objdata.address;
	},



};
</script>

<style scoped lang="scss">
	
	
.frame{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 30upx;
}
	
	
.seaRch {
	top: 0;
	width: 100%;
	height: 100upx;
	line-height: 100upx;
	background-color: #ffffff;
}
.seaRch-input {
	height: 100upx;
	line-height: 100upx;
	font-size: 30upx;
	color: #666666;
	padding-left: 15px;
	border-radius: 20upx;
	width: 90%;
	margin: 0 auto;
	background-color: #fafafa;
}

.searchdata{
	display: flex;
	justify-content: space-between;
	margin-top: 30upx;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	
}
.searchdata text{
	height: 100upx;
	line-height: 100upx;
	text-align: center;
	
}

	.img{
		margin-right: 20upx;
		width: 40upx !important;
		height: 40upx !important;
	}
	
	.searchdata-v{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #e6e6e6;
	}
</style>
